import i18next, {t} from 'i18next';
import {headers} from 'next/headers';
import {type ReactNode} from 'react';
import {Col, Row, Stack} from 'react-bootstrap';
import ProgressProvider from '@/modules/AppProgressBar';
import Aside from '@/modules/Aside';
import Header from '@/modules/Header';
import I18nProvider from '@/modules/I18nProvider';
import {i18nextInit} from '@/modules/I18nProvider/initServer';
import StoreProvider from '@/modules/StoreProvider';
import style from './app.module.scss';
import './globals.scss';

const getLanguage = () => {
    return headers().get('Language') || 'en';
};

i18nextInit('en');
export async function generateMetadata() {
    const lng = getLanguage();
    i18next.changeLanguage(lng);

    return {
        title: t('在线工具 - toolkit'),
        keywords: ['在线工具', '文本比较', 'json格式化'],
        description: '该网站是一款在线文本比较工具,支持json比较,文本比较,json解析,json格式化,该工具界面采用bootstrap ui更加简洁、美观'
    };
}

export default async function RootLayout({children}: {children: ReactNode}) {
    const lng = getLanguage();
    i18next.changeLanguage(lng);

    return (
        <html lang={lng}>
            <head>
                <link rel="icon" type="image/svg+xml" href="/tk/cli-logo.png" />
                <meta name="baidu-site-verification" content="codeva-xD2C4GPLVz" />
                <meta name="google-site-verification" content="fs5EybByxqvIchWyU4mIpxHS8HJrFYX8flIiBwdT6ps" />
                <meta name="sogou_site_verification" content="1ITytyyray" />
            </head>
            <body>
                <StoreProvider>
                    <I18nProvider lng={lng}>
                        <Stack className={style['app-root-wrapper']}>
                            <Header />

                            <Row as='main' className={`${style['main-wrapper']} tw-flex-1 tw-overflow-hidden`}>
                                <Col className='tw-h-full'>
                                    <ProgressProvider>{children}</ProgressProvider>
                                </Col>
                                <Col
                                    className='d-none d-md-block'
                                    style={{marginLeft: '10px'}}
                                    md={{span: 5}}
                                ><Aside /></Col>
                            </Row>
                        </Stack>
                    </I18nProvider>
                </StoreProvider>
            </body>
        </html>
    );
}
